<template>
  <div class="page_wrap" @contextmenu="handleMouse">
    <div class="top_warp" v-on:dblclick="hitMax">
      <div class="logo" v-on:mousedown="hitCaption">
        <div style="margin-left:20px;"><img src="@/assets/imgs/logo.svg" style="width:20px;padding-top:10px;" /></div>
        <div style="font-size:18px;margin-left:5px;">HeckMonit</div>
        <div style="margin-left:100px;">
        </div>
      </div>
      <div class="tool">
        <!-- <div class="tools" v-on:click="$router.push('/home/setting')">
          <iconpark-icon name="setting-two"></iconpark-icon>
        </div> -->
        <div class="tools" v-on:click="$router.push('/home/message')">
          <iconpark-icon name="mail"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="$router.push('/home/about')">
          <iconpark-icon name="info"></iconpark-icon>
        </div>
        <div style="margin-left:20px;border-right:1px solid #cdcdcd;width:10px;height:15px;"> </div>
        <div class="tools" v-on:click="hitMin">
          <iconpark-icon name="minus"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitMax">
          <iconpark-icon name="full-screen-two"></iconpark-icon>
        </div>
        <div class="tools" v-on:click="hitClose">
          <iconpark-icon name="close"></iconpark-icon>
        </div>
      </div>
    </div>
    <div class="left_wrap" :style="flag?'width:50px;z-index: 2;':'width:200px;z-index: 200;'">
      <!-- <div style="color:#999999;font-size:13px;line-height:38px;padding-left:20px;display: flex;align-items: center;border-bottom:1px solid #cdcdcd;">功能导航</div> -->
      <li v-on:click="$router.push('/home/index')"><iconpark-icon name="home-two" style="font-size:16px;margin-right:24px;"></iconpark-icon><span>系统首页</span></li>
      <li v-on:click="$router.push('/home/host')"><iconpark-icon name="airplay" style="font-size:16px;margin-right:24px;"></iconpark-icon>主机管理</li>
      <li v-on:click="$router.push('/home/monitor')"><iconpark-icon name="electrocardiogram-75o021ol" style="font-size:16px;margin-right:24px;"></iconpark-icon>主机监控</li>
      <li v-on:click="$router.push('/home/alarm')"><iconpark-icon name="caution-75o02oi2" style="font-size:16px;margin-right:24px;"></iconpark-icon>告警记录</li>  
    </div>
    <!-- <div tioutline="" @click="switchStatus"  class="ti3-leftmenu-toggle" tabindex="0" id="ti_auto_id_5_toggle" :style="flag?'left:49px;':'left:198px'">
      <el-icon v-if="!flag" style="font-size:12px;"><CaretLeft /></el-icon>
      <el-icon v-if="flag" style="font-size:12px;"><CaretRight /></el-icon>
    </div> -->
    <div class="right_wrap" :style="flag?'margin-left: 50px;;':'margin-left: 200px;'">
      <div class="right_content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag:true
    }
  },
  methods:{
    switchStatus(){
      this.flag = !this.flag;
    },
    handleMouse(e){
        e.preventDefault();
    },
    hitCaption(){
        aardio.hitCaption()
    },
    hitMin(){
        aardio.hitMin()
    },
    hitMax(){
        aardio.hitMax()
    },
    hitClose(){
        ElMessageBox.confirm(
            '是否注销登录并关闭？',
            '系统提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        )
            .then(() => {
                aardio.hitClose()
                // ElMessage({
                //     type: 'success',
                //     message: 'Delete completed',
                // })
            })
            .catch(() => {
                // ElMessage({
                //     type: 'info',
                //     message: 'Delete canceled',
                // })
            })
    }
  }
}
</script>
<style>
.page_wrap{
  background-color: #fff;
  font-size: 12px;
  color:#000;
}

.top_warp{
  display: flex;
  height:50px;
  background-color: #282B33;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
}

.tool{
  margin-right:20px;
  color:#fff;
  display: flex;
  align-items:center;
}

.tools{
  margin-left:25px;
  cursor: pointer;
  padding-top:3px;
  /* padding:2px; */
  font-size:14px;
  color:#adb0b8;
}

.tools:hover{
  /* background-color: #E33E3E; */
  color:#ffffff;
}

.logo{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  /* margin-left: 20px; */
  width: 800px;
  display: flex;
  align-items: center;
}

.logo input{
  background-color: #E33E3E;
  border: 0px;
  padding:5px 8px;
  color:#fff;
  font-size: 16px;
  line-height: 20px;
}

.logo input:focus{
  background-color: #E33E3E;
  border: 0px !important;
}

.left_wrap{
  width: 200px;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  /* padding:10px; */
  padding-top:20px;
  background-color: #fff;
  border-right: 1px solid rgb(219, 221, 226);
  overflow-y: auto;
  box-shadow: 1px 0px 2px 0 #0000001a;
  -webkit-box-shadow: 1px 0px 6px 0 #0000001a;
  z-index:200;
  overflow-x:hidden;
}

.left_wrap li{
  list-style: none;
  height:48px;
  line-height:48px;
  display: flex;
  align-items: center;
  padding-left:18px;
  cursor: pointer;
  font-size: 13px;
  color:#303133;
}

.left_wrap li:hover{
  background-color: #F2F5FC;
  border-radius: 4px;
  color:#526ecc;
}

.right_wrap{
  background-color: #fff;
  position: relative;
  margin-left: 200px;
  top: 50px;
}

.right_content{
  height: calc(100vh - 50px);
  overflow-y:auto;
  padding:15px;
  /* background-color: #e9ebf0; */
  background-color: #fff;
}

.bottom_warp{
  height:70px;
  background-color:#fff;
  position:fixed;
  bottom: 0;
  width:100%;
  border-top: 1px solid rgb(219, 221, 226);
  padding:10px;
  display: flex;
  justify-content: space-between;
}


.ti3-leftmenu-toggle {
    background-color: #fff;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    height: 80px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    z-index:21;
    left:1px;
    box-shadow: 1px 0px 2px 0 #0000001a;
    display: flex;
    align-items: center;
    position:fixed;
    background-color: #fff;
    z-index: 210;
}
</style>